<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混入</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="root"></div>
<script>
    /**
     * mixin混入: 提高复用性
     * 组件data，method优先级高于mixin data优先级
     * 生命周期函数，先执行mixin里面的，再执行组件里面的
     * 自定义的属性，组件中的属性优先级高于mixin属性的优先级
     */
    // const myMixin = {
    //     data(){
    //         return {
    //             number:2,
    //             count: 1
    //         }
    //     },
    //     created(){
    //         console.log('mixin created...')
    //     }
    // }
    const app = Vue.createApp({
        number:2,
        data(){
          return {
              number: 2
          }
        },
        //mixins:[myMixin],
        created(){
            console.log('created ...')

        },
        template: `
                <div>
                    <div>{{this.$options.number}}</div>
                    <div>{{count}}</div>
                    <button @click="handleClick">增加</button>
                </div>
            `,
        methods:{
            handleClick(){
                this.number ++
            }
        }
    });
    app.config.optionMergeStrategies.number=(mixinVal,appVal)=>{
        return mixinVal || appVal
    }
    app.mixin({
        number:1,
        data(){
            return {number:1,count:23}
        },
        created(){
            console.log('mixin created')
        },
        methods:{
            handleClick(){
                console.log('mixin handleclick')
            }
        }
    });
    const vm = app.mount("#root");
</script>
</body>
</html>